<template>
	<view>
		<cu-custom :isBack="true" :bgColor="'bg-red'">
			<block slot="backText"></block>
			<block slot="content">我的市场<text v-if="member && member.level">（{{member.level.name}}）</text></block>
		</cu-custom>
		
		<view class="whole-box">
			<scroll-view scroll-x class="bg-white nav text-center">
				<view class="cu-item my-cu-item" v-for="(item,index) in listObj" :key="index" :class="index==cur?'cur text-'+theme:'text-black'"
				 @tap="changeStatus(index)" :data-id="index">
					<view class="">{{item}}</view>
					
				</view>
			</scroll-view>
			<view class="gold-black-box">
				
				<view class="my-data-box radius" :style="'height:'+scroll_box_height+'px'" >
					
					<view class="my-data-box-content">
						<view class="list " v-if="cur==0">
							<view class="list-item2 radius ">
								<view class="info-gr">
									<text>个人:</text>
									<text v-for="(gr,r) in gr_list" :key="r" >
										{{gr.levelname}}({{gr.ids.length}})
									</text>
								</view>
								<view class="info-gr">
									<text>市场:</text>
									<text v-for="(tm,m) in tm_list" :key="m" >
										{{tm.name}}({{tm.dt}})
									</text>
								</view>
								
							</view>
							<scroll-view scroll-y :style="'height:'+scrollHeight+'px'" @scrolltolower="getMore">
								<block v-for="(item,index) in list" :key="index" v-if="list != ''">
									<view class="list-item radius">
										<image class="avatar" :src="item.head_portrait != '' ? item.head_portrait : '../../../static/default-avatar.png'"></image>
										<view class="info">
											<view class="info-line"><text class="bold">{{item.nickname ? item.nickname : item.realname}}（{{item.level.name}}:ID-{{item.id}}）</text></view>
											<view class="info-line"><text>手机号码：{{item.mobile ? $common.changePhone(item.mobile): '无'}}</text></view>
											<view class="info-line" v-if="item.team_level != ''">
												<text>市场组成：
													<text v-for="(tm,i) in item.team_level" :key="i" >
														{{tm.name}}({{tm.dt}})
													</text>
												</text>
											</view>
											<view class="info-line" v-else>
												<text>市场组成：<text >无</text>
												</text>
											</view>
											
											<view class="info-line"><text>加入时间：{{$common.timeFormat(item.created_at)}}</text></view>
										</view>
									</view>
									
								</block>
								<block v-if="list.length == 0">
									<view style="color: #000000;padding: 10px;" class="cu-load margin-center text-grey" >暂无数据</view>
								</block>
								<view v-else class="cu-load margin-center text-grey" :class="loading?'loading':'over'" style="color: #1A181E;"></view>
							</scroll-view>
						</view>
						
						<view class="list " v-if="cur==1">
							<view class="list-item radius">
								<view>本月个人业绩：{{order_gr}}</view>
								<view>旗下市场总业绩：{{order_team}}</view>
							</view>
							<scroll-view scroll-y :style="'height:700px'" @scrolltolower="getMore">
								<block v-for="(tam,i) in team_lists" :key="i" v-if="team_lists">
									<view class="list-item radius" v-if="tam && tam.member">
										<view class="info">
											<view class="info-line"><text class="bold">第{{i+1}}名</text></view>
											<view class="info-line"><text>昵称{{tam.member.nickname ? tam.member.nickname : tam.member.realname}}</text></view>
											<view class="info-line">
												<text>手机：{{tam.member.mobile ? $common.changePhone(tam.member.mobile): '无'}}
												</text>
											</view>
											<view class="info-line">
												<text>业绩人数：{{tam.order_count}}</text>
											</view>
											<view class="info-line2">
												<text>{{tam.order_pay}}</text>
											</view>
										</view>
									</view>
									
								</block>
								<block v-if="team_lists.length == 0">
									<view style="color: #000000;padding: 10px;" class="cu-load margin-center text-grey" >暂无数据</view>
								</block>
								<view v-else class="cu-load margin-center text-grey" :class="payloading?'loading':'over'" style="color: #1A181E;"></view>
							</scroll-view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<!-- <view class="page_footer">
			<image @tap="onLocation" src="@/static/locationpay.png" style="width: 80px;height: 80px;float: right;margin-right: 15px;"></image>
		</view> -->
		<Navbar ref="navbar" PageCur="order_pay"></Navbar>
	</view>
</template>

<script>
	import Navbar from '@/components/default/Navbar.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			Navbar
		},
		computed: mapState(['forcedLogin', 'hasLogin', 'channelLogin']),
		mounted() {
			// this.getScrollH()
		},
		data() {
			return {
				statistics: null,
				member:null,
				cur: 0,
				scroll_box_height: 950,
				scrollHeight: 900,
				teamInfo:null,
				loading:false,
				hasMore:true,
				theme: this.$config.THEME(),
				page:1,
				list:[],
				listObj: ['一类客户','业绩指标'],
				pro_list:[],
				payloading:false,
				pageTab:1,
				order_gr:0,
				order_team:0,
				team_lists:[],
				gr_list:[],
				gr_tean:[],
				tm_list:[],
				tm_tean:[],
			}
		},
		onLoad() {
			if (this.$common.loginAuth(true)) {
				this.$common.getMember().then((member)=>{
					this.member = member
					// this.getTeamInfo()	
				})
			}
			this.getProduct()
			this.getList(this.cur)
			
		},
		onShow() {
			
		},
		methods: {
			getScrollH() {
				let sys = uni.getSystemInfoSync();
				let winHeight = sys.windowHeight;
				//console.log(winHeight)
				let _this = this
				// 计算scroll-view高度
				let query = uni.createSelectorQuery().in(_this);
				query.select('.top-box').boundingClientRect()
				query.select('.padding-sx2').boundingClientRect()
				query.selectViewport()
				query.exec(function(res) {
					
					// _this.scroll_box_height = winHeight  - 12 - 24
					_this.scrollHeight = winHeight 
				})
			},
			changeStatus(i){
				this.cur = i
				if(this.cur ==1){
					this.pro_list=[],
					this.payloading=false,
					this.pageTab=1,
					this.getTeamInfo(this.cur)
				}else{
					this.list=[],
					this.hasMore= true,
					this.loading=false,
					this.page=1,
					this.getList(this.cur)
				}
			},
			getMore(){
				// this.getList(this.cur)
				if(this.cur ==1){
					
					this.getTeamInfo(this.cur)
				}else{
					
					this.getList(this.cur)
				}
			},
			getProduct(){
				uni.showLoading({
					'title':'加载中...'
				})
				this.$http
					.get('team_order_product')
					.then((response) => {
						uni.stopPullDownRefresh()
						this.gr_list=response.data.data.stat
						this.gr_tean=response.data.data.tb_level
						this.tm_list=response.data.data.tm_level
						this.tm_tean=response.data.data.tab_dat
						console.log(response.data.data)
						uni.hideLoading()
						
					})
					.catch((response) => {
						uni.stopPullDownRefresh()
						console.log(response)
					})
			},
			getTeamInfo() {
				uni.showLoading({
					'title':'加载中...'
				})
				this.$http
					.get('team_order_info', {
							type: this.cur,
							page: this.pageTab,
						})
					.then((response) => {
						uni.stopPullDownRefresh()
						this.teamInfo = response.data.data
						this.order_gr=this.teamInfo.pay_order
						this.order_team=this.teamInfo.channel_order
						this.team_lists=this.teamInfo.team_sort
						console.log(this.team_lists)
						// this.$common.setCache('team_info', response.data.data, 5 * 60)
						uni.hideLoading()
						
					})
					.catch((response) => {
						uni.stopPullDownRefresh()
						console.log(response)
					})
			},
			getList(index) {
				if (this.hasMore && !this.loading) {
					uni.showLoading({
						'title':'加载中...'
					})
					this.$http
						.get('team_list', {
							type: this.cur,
							page: this.page,
						})
						.then((response) => {
							console.log(response)
							this.loading = false
							let list = this.list
							if (response.data.data.length > 0) {
								list = list.concat(response.data.data)
							} else {
								this.hasMore = false
							}
							uni.hideLoading()
							this.list = list
							this.page += 1
							this.getScrollH()
							uni.stopPullDownRefresh()
							// this.$forceUpdate()
						})
						.catch((response) => {
							uni.stopPullDownRefresh()
							console.log(response)
						})
				}
			},
			onPullDownRefresh() {
				if(this.cur ==1){
					this.pro_list=[],
					this.payloading=false,
					this.pageTab=1,
					this.getTeamInfo(this.cur)
				}else{
					this.list=[],
					this.hasMore= true,
					this.loading=false,
					this.page=1,
					this.getList(this.cur)
				}
			},
			
		},
	}
</script>


<style>
	.whole-box{
		background-image: url(../../../static/red-new/new-back.png);
		background-size: 100% 100%;
		min-height: calc(100vh - 45px);
		padding: 0px 0 12px;
		/* position: fixed; */
		width: 100%;
	}
	.gold-black-box{
		padding: 12px 0 12px;
		margin: 10px 10rpx;
		/* border: 2rpx solid #999999; */
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.gold-black-box .top-box{
		/* margin-top: 25rpx; */
		width: 690rpx;
		height: 400rpx;
		/* border: 2rpx solid #999999; */
		/* border-radius: 30rpx; */
		overflow: hidden;
		position: relative;
		background-color: #ffffff;
	}
	.top-box .top-box-bg{
		width: 100%;
		height: 100%;
	}
	.top-box .top-box-content{
		width: 690rpx;
		/* height: 276rpx; */
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.top-box-content .avatar{
		margin-top: 26rpx;
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		border: 1rpx solid #EAEAEA;
	}
	.top-box-content .username{
		margin-top: 14rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #000000;
	}
	.top-box-content .data-box{
		margin-top: 20rpx;
		width: 100%;
		margin-top: 28rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.data-box .data-item{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.data-box .data-item .num{
		width: 86rpx;
		height: 86rpx;
		/* background-color: #333333; */
		/* border: 2rpx solid #E5D4B9; */
		border-right: 0;
		border-bottom: 0;
		/* border-radius: 50% 50% 0 50%; */
		border-bottom-right-radius: 0;
		text-align: center;
		line-height: 86rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #000000;;
	}
	.data-box .data-item .note{
		margin-top: 20rpx;
		font-size: 26rpx;
		font-weight: bold;
		color: #ffffff;
		/* background-color: #FCC710; */
		width: 80px;
		text-align: center;
		height: 25px;
		line-height: 25px;
		border-radius: 30rpx;
		/* background: -webkit-gradient(linear, 0 0, 0 100%, from(#FFEA5E), to(#FCC710)); */
		/* background: -webkit-linear-gradient(left, #FFEA5E, #FFEA5E, #FCC710, #FCC710); */
		background-color: #1A181E;
		/* box-shadow: 0px 2rpx 0px 0px rgba(91, 82, 67, 0.5); */
		
	}
	
	
	
	.data-box .data-item .note2{
		margin-top: 20rpx;
		font-size: 26rpx;
		font-weight: bold;
		color: #000000;
		/* background-color: #FCC710; */
		border: 1px solid #000000;
		width: 80px;
		text-align: center;
		height: 25px;
		line-height: 25px;
		border-radius: 30rpx;
		/* background: -webkit-gradient(linear, 0 0, 0 100%, from(#FFEA5E), to(#FCC710)); */
		/* background: -webkit-linear-gradient(left, #FFEA5E, #FFEA5E, #FCC710, #FCC710); */
		/* box-shadow: 0px 2rpx 0px 0px rgba(91, 82, 67, 0.5); */
		
	}
	
	.data-box .data-item text.cur{
		background-color: #1A181E;
		font-weight: bold;
		color: #ffffff;
		
	}
	
	
	.top-box .bg-logo{
		width: 196rpx;
		height: 54rpx;
		position: absolute;
		top: 26rpx;
		left: 20rpx;
	}
	
	.top-box .level-detail{
		position: absolute;
		top: 52rpx;
		left: 400rpx;
		padding: 0 20rpx;
		height: 40rpx;
		line-height: 40rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		/* background-color: #000000; */
		/* background: -webkit-linear-gradient(left, #C48415, #C48415, #EDCB3E, #CA8B0F); */
		/* background: -webkit-gradient(linear, 0 0, 0 100%, from(#C48415), to(#CA8B0F)); */
	}
	.level-detail image{
		width: 145rpx;
		height: 43rpx;
		margin-right: 6rpx;
		flex-shrink: 0;
		left: -13px;
		/* top: 16px; */
	}
	.level-detail text{
		font-size: 22rpx;
		font-weight: bold;
		color: #ffffff;
		position: absolute;
		margin-top: 10rpx;
		margin-left: -12rpx;
	}
</style>

<style>
	.gold-black-box .my-data-box{
		margin-top: 12px;
		width: 690rpx;
		height: 600rpx;
		/* border: 2rpx solid #999999; */
		/* border-radius: 30rpx; */
		overflow: hidden;
		position: relative;
		background-color: #ffffff;
		/* opacity: 0.6; */
	}
	.my-data-box .my-data-box-bg{
		width: 100%;
		height: 100%;
	}
	.my-data-box .my-data-box-content{
		width: 690rpx;
		/* height: 336rpx; */
		position: absolute;
		left: 0;
		top: 0;
		padding: 30rpx 40rpx;
	}

	.my-data-box-content .status-box{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 25rpx;
		width: 65%;
		margin: 0 auto;
		/* border-bottom: 1rpx solid #999999; */
	}
	.status-box text{
		width: 150rpx;
		height: 56rpx;
		text-align: center;
		line-height: 56rpx;
		/* background-color: #BFBFBF; */
		background-color: #EAEAEA;
		border-radius: 28rpx;
		font-size: 26rpx;
		font-weight: bold;
		color: #000000;
	}
	.status-box text.cur{
		background-color: #1A181E;
		font-weight: bold;
		color: #ffffff;
		
	}
	
	.my-data-box-content .list{
		
	}
	.my-data-box-content .list .list-item2{
		padding: 30rpx 30rpx;
		
		justify-content: space-between;
		align-items: center;
		/* background-color: #FFFAE2; */
		background-color: #1A181E;
		color: #ffffff;
		margin-top: 10px;
		/* border-bottom: 1rpx solid #999999; */
	}
	
	.my-data-box-content .list .list-item{
		padding: 30rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* background-color: #FFFAE2; */
		background-color: #1A181E;
		color: #ffffff;
		margin-top: 10px;
		/* border-bottom: 1rpx solid #999999; */
	}
	.list-item .avatar{
		width: 108rpx;
		height: 108rpx;
		border-radius: 50%;
		border: 1rpx solid #EAEAEA;
		margin-right: 20rpx;
		flex-shrink: 0;
	}
	.list-item .info{
		flex: 1;
	}
	.info-gr{
		width: 100%;
		justify-content: space-between;
		align-items: center;
	}
	.info .info-line{
		margin-top: 20rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.info .info-line2{
		margin-left: 232px;
		margin-top: -51px;
		display: flex;
		position: absolute;
		align-items: center;
	}
	.info .info-line:first-child{
		margin-top: 0;
	}
	.info .info-line text{
		font-size: 30rpx;
		color: #ffffff;
	}
	.info .info-line text.bold{
		font-weight: bold;
	}
</style>